<template>
  <div class="container">
    <div class="showCont" v-if="!showTimeOut && showCont">
      <div class="orderHead">
        <div class="serchCont">
          <div class="serchInput">
            <input
              v-model="serchKey"
              @keydown="keyDownFn($event)"
              placeholder="请输入订单号或项目名称"
            />
            <div @click="serchFn" class="serchBtn iconfont icon-sousuo2"></div>
          </div>
        </div>
        <div class="orderTop">
          <div class="orderNav">
            <div
              :class="stepId == item.id ? 'navItem_active' : 'navItem'"
              @click="navFn(item)"
              :key="index"
              v-for="(item, index) in navArr"
            >
              {{ item.val }}
            </div>
          </div>
        </div>
      </div>
      <div class="orderCont">
        <div
          class="orderItem"
          @click="toDetail(item)"
          :key="index"
          v-for="(item, index) in orderArr"
        >
          <div class="itemHead">
            <div class="orderNum">{{ item.project_name }}</div>
            <div class="orderStatus">
              <span class="redText" v-if="item.is_bidder == 1">竞标中</span>
              <span class="blueText" v-if="item.is_bidder == 2">已中标</span>
              <span class="greenText" v-if="item.is_bidder == 3">已完成</span>
              <span class="balckText" v-if="item.is_bidder == 4">未中标</span>
            </div>
          </div>
          <div class="orderMain">
            <div class="itemForm">
              <div class="formItem">
                <div class="itemName">项目编号</div>
                <div class="itemVal">{{ item.project_demand_number }}</div>
              </div>
              <div class="formItem">
                <div class="itemName">接单时间</div>
                <div class="itemVal">{{ item.create_time }}</div>
              </div>
              <div class="formItem">
                <div class="itemName">中标时间</div>
                <div class="itemVal">{{ item.bidder_time }}</div>
              </div>
            </div>
            <div class="orderPricr">
              ¥{{ $converData.setMoney(item.project_budget) }}
            </div>
          </div>
        </div>
      </div>
      <run v-if="isChageNav"></run>
      <noData v-if="orderArr.length == 0 && !isChageNav"></noData>
    </div>
    <footcpm></footcpm>
    <load v-if="!showCont"></load>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>
<script>
import footcpm from "@/components/footcpm.vue";
import { Record } from "@/http/api";
import load from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
import noData from "@/components/public/noData.vue";
import run from "@/components/public/run.vue";

export default {
  components: { footcpm, load, getTimeOut, noData, run },
  name: "",
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      isChageNav: false,
      serchKey: "",
      navArr: [
        { val: "全部", id: 0 },
        { val: "竞标中", id: 1 },
        { val: "已中标", id: 2 },
        { val: "已完成", id: 3 },
      ],
      stepId: 0,
      orderArr: [],
      page: 1,
      per_page: 10,
      last_page: 0,
      getting: false,
    };
  },
  props: {},
  setup() {},
  methods: {
    keyDownFn(e) {
      if (e.keyCode == 13) {
        this.serchFn();
      } else if (e.keyCode == 8) {
        setTimeout(() => {
          if (!this.serchKey) {
            this.serchFn();
          }
        }, 10);
      }
    },
    serchFn() {
      this.page = 1;
      this.orderArr = [];
      this.getData();
    },
    toDetail(item) {
      this.$router.push({
        path: "/orderDetail",
        query: { id: item.user_project_deliver_id },
      });
    },
    navFn(item) {
      this.stepId = item.id;
      this.orderArr = [];
      this.page = 1;
      this.getData();
    },
    getData() {
      let data = {
        page: this.page,
        per_page: this.per_page,
        search: this.serchKey,
        status: this.stepId,
      };
      if (this.isChageNav) {
        return false;
      }
      this.isChageNav = true;
      Record(data)
        .then((res) => {
          if (res.data.code == 1) {
            let arr = res.data.data.data;
            for (let i = 0; i < arr.length; i++) {
              this.orderArr.push(arr[i]);
            }
            setTimeout(() => {
              this.getting = false;
            }, 100);
            this.last_page = res.data.data.last_page;
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
          this.isChageNav = false;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
          this.isChageNav = false;
        });
    },
    nextfn() {
      if (this.$route.path == "/order") {
        let h =
          document.documentElement.scrollHeight || document.body.scrollHeight;
        let wh =
          document.documentElement.clientHeight || document.body.clientHeight;
        let top = document.documentElement.scrollTop || document.body.scrollTop;
        let bottom = h - wh - top;
        if (bottom <= 50) {
          if (this.getting == false) {
            if (this.last_page > this.page) {
              this.getting = true;
              this.page++;
              this.getData();
            }
          }
        }
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.nextfn);
  },
  created() {
    this.getData();
    // this.showTimeOut = true;
    // this.showCont = true;
  },
};
</script>
<style scoped lang="less">
.container {
  background-color: #e7eeff;
  min-height: 100vh;
  .showCont {
    padding-bottom: 3rem;
    box-sizing: border-box;
    padding-top: 5.75rem;
  }
  .orderHead {
    width: 100%;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    .serchCont {
      width: 100%;
      background-color: #fff;
      padding: 0.75rem 4% 0.25rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .backBtn {
        margin-right: 0.25rem;
        font-size: 1rem;
        padding: 0 0.25rem;
      }
      .serchInput {
        flex: 1;
        width: 0.5rem;
        background-color: #fff;
        // margin-right: 0.6rem;
        padding: 0 0.25rem 0 0.75rem;
        color: #777;
        border-radius: 1rem;
        box-sizing: border-box;
        height: 1.8rem;
        line-height: 1.8rem;
        // white-space: nowrap;
        // overflow: hidden;
        font-size: 0.65rem;
        // text-overflow: ellipsis;
        display: flex;
        align-items: center;
        border: 1px solid #86a9fb;
        input {
          border: none;
          outline: none;
          padding: 0;
          width: 100%;
          height: 1.8rem;
          line-height: 1.8rem;
          background: none;
          font-size: 0.6rem;
        }
        .serchBtn {
          width: 1.8rem;
          height: 1.8rem;
          font-size: 1.2rem;
          text-align: center;
          line-height: 1.8rem;
          border-radius: 50%;
          color: #86a9fb;
          // color: white;
        }
      }
    }
    .orderTop {
      width: 100%;
      padding: 0 4%;
      box-sizing: border-box;
      background-color: #fff;
      .orderNav {
        width: 100%;
        display: flex;
        position: relative;
        justify-content: space-between;
        .navItem,
        .navItem_active {
          width: 25%;
          text-align: center;
          padding: 0.5rem;
          box-sizing: border-box;
          font-size: 0.65rem;
          color: #666;
          white-space: nowrap;
        }
        .navItem_active {
          color: #86a9fb;
          border-bottom: 1px solid #86a9fb;
        }
      }
    }
  }
  .orderCont {
    width: 92%;
    margin: 0 auto;
    .orderItem {
      background-color: #fff;
      border-radius: 0.25rem;
      padding: 0.75rem 4%;
      box-sizing: border-box;
      margin-bottom: 0.75rem;
      .itemHead {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 0.75rem;
        box-sizing: border-box;
        border-bottom: 1px dashed #ccc;
        .orderNum {
          font-size: 0.8rem;
          font-weight: bold;
        }
        .orderStatus {
          font-size: 0.6rem;
          .redText {
            color: #f56c6c; //招标中|待选标
          }
          .blueText {
            color: #86a9fb;
          }
          .greenText {
            color: #85ce61;
          }
          .balckText {
            color: #999;
          }
        }
      }
      .orderMain {
        margin-top: 0.75rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .itemForm {
          flex: 1;
          width: 1rem;
          margin-right: 0.75rem;
        }
        .orderPricr {
          font-size: 0.8rem;
          color: #86a9fb;
        }
      }
      .formItem {
        display: flex;
        margin-bottom: 0.5rem;
        line-height: 1rem;
        .itemName {
          width: 3rem;
          // font-size: 0.6rem;
          margin-right: 0.75rem;
        }
        .itemVal {
          flex: 1;
          width: 1rem;
          color: #666;
          // font-size: 0.6rem;
        }
      }
      .orderUnder {
        // padding: 0.75rem 0;
        padding-top: 0.75rem;
        border-top: 1px dashed #ccc;
        margin-top: 0.75rem;
        display: flex;
        justify-content: space-between;
        font-size: 0.6rem;
        align-items: center;
        color: #999;
        .orderBtn {
          padding: 0.35rem 1rem;
          color: #86a9fb;
          border: 1px solid #86a9fb;
          border-radius: 0.25rem;
        }
      }
    }
  }
  .loadMore {
    text-align: center;
    margin-top: 0.75rem;
    color: #999;
    font-size: 0.6rem;
  }
}
</style>
